<script setup>
import {
  personGetServe,
  personEditStatusServe,
  personDelServe,
  personResetPwServe
} from '@/api/person'
import { Delete, Edit, Upload, Search, Refresh } from '@element-plus/icons-vue'
import PersonEnterDialog from './components/PersonEnterDialog.vue'
import PersonRecordDrawer from './components/PersonRecordDrawer.vue'
import AdminListDialog from './components/AdminListDialog.vue'
import { ref } from 'vue'

const peopleList = ref([])
//参数
const name = ref('')
const stu_id = ref('')
const status = ref(2)
const statusList = ref([
  { status: '默认', value: 2 },
  { status: '在职', value: 1 },
  { status: '离职', value: 0 }
])
const search = ref({ pagenum: 1, pagesize: 7 })
const total = ref(0)
const pageChange = (page) => {
  search.value.pagenum = page
  getPeopleList()
}
const handleSizeChange = (size) => {
  search.value.pagesize = size
  search.value.pagenum = 1
  getPeopleList()
}
//获取人员列表
const getPeopleListLoading = ref(false)
const getPeopleList = async (obj) => {
  getPeopleListLoading.value = true
  obj = { ...obj, ...search.value }
  ////
  const res = await personGetServe(obj)
  total.value = res.total
  peopleList.value = res.record
  getPeopleListLoading.value = false
  ElMessage.success({ message: '获取成功', offset: 70 })
}
getPeopleList()

//查询
const onSearch = () => {
  let obj = ref({})
  if (name.value) {
    obj.value = { name: name.value }
  }
  if (stu_id.value) {
    obj.value = { ...obj.value, stu_id: stu_id.value }
  }
  if (status.value !== 2) {
    obj.value = { ...obj.value, status: status.value }
  }
  search.value.pagenum = 1
  getPeopleList(obj.value)
}
const onReset = () => {
  name.value = ''
  stu_id.value = ''
  getPeopleList()
}

//录入
const personEnterRef = ref()
const onOpenEnter = () => {
  personEnterRef.value.onOpenEnter()
}
const afterOnEnter = () => {
  name.value = ''
  stu_id.value = ''
  status.value = 2
  search.value.pagenum = Math.ceil((total.value + 1) / search.value.pagesize)
  getPeopleList()
}
/*/操作*/
const onEditStatus = async (row) => {
  ////确认
  await ElMessageBox.confirm(
    `确认修改该维修人在职状态为${row.status ? '离' : '在'}职？`,
    '温馨提醒',
    {
      type: 'warning',
      confirmButtonText: '确定',
      cancelButtonText: '取消'
    }
  )
  await personEditStatusServe({ stu_id: row.stu_id, status: row.status == 1 ? 0 : 1 })
  ElMessage.success({ message: '修改成功', offset: 70 })
  getPeopleList()
}
//重置某人密码
const onResetPw = async ({ stu_id, name }) => {
  await ElMessageBox.confirm(`确认将重置${name}的密码为默认密码`, '温馨提醒', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
  await personResetPwServe({ stu_id: stu_id })
  ElMessage.success({ message: '重置成功', offset: 70 })
}
//重置所有密码
const onResetAllPw = async () => {
  await ElMessageBox.confirm('确认将重置所有人的密码为默认密码', '温馨提醒', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
  const { msg } = await personResetPwServe()
  ElMessage.success({ message: `${msg}`, offset: 70, duration: 5000 })
}
const onRemove = async ({ stu_id }) => {
  ////确认
  await ElMessageBox.confirm('确认删除该维修人？', '温馨提醒', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  })
  await personDelServe(stu_id)
  ElMessage.success({ message: '移除成功', offset: 70 })
  getPeopleList()
}

//值班情况
const personRecordRef = ref()
const onShowDuty = (row) => {
  personRecordRef.value.onShowDuty(row)
}

//查看管理员
const adminListRef = ref()
const onShowAdmin = () => {
  adminListRef.value.openShowAdmin()
}
</script>

<template>
  <div style="display: flex; justify-content: space-between">
    <el-form inline>
      <el-form-item label="状态筛选" style="margin-right: 5px">
        <el-select v-model="status" placeholder="Select" style="width: 90px">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.status"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item style="width: 200px; margin-right: 5px">
        <el-input v-model="name" placeholder="输入名字模糊查询"></el-input>
      </el-form-item>
      <el-form-item style="width: 200px">
        <el-input v-model="stu_id" placeholder="输入学号模糊查询"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button type="primary" plain @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <div style="margin-right: 50px">
      <el-button-group>
        <el-button type="primary" @click="onOpenEnter" :icon="Upload"> 录入维修人 </el-button>
        <el-button type="primary" @click="onShowAdmin" :icon="Search"> 管理员 </el-button>
      </el-button-group>
    </div>
  </div>
  <!-- 人员表 -->
  <el-table :data="peopleList" v-loading="getPeopleListLoading">
    <el-table-column label="序号" type="index" width="123"> </el-table-column>
    <el-table-column label="姓名" prop="name"> </el-table-column>
    <el-table-column label="学号" prop="stu_id"> </el-table-column>
    <el-table-column label="在职状态" prop="">
      <template #default="{ row: { status } }">
        {{ status ? '在职' : '离职' }}
      </template>
    </el-table-column>
    <el-table-column label="" width="350">
      <template #header>
        <span> 操作 </span>
        <el-tooltip content="重置所有人员密码" effect="light" placement="top">
          <el-button
            style="margin-left: 145px"
            size="default"
            plain
            @click="onResetAllPw()"
            :icon="Refresh"
          >
          </el-button>
        </el-tooltip>
      </template>
      <template #default="{ row }">
        <el-button size="default" type="primary" @click="onShowDuty(row)" :icon="Search">
          值班记录
        </el-button>
        <el-tooltip content="修改状态" effect="light" placement="left-start">
          <el-button size="default" type="warning" plain @click="onEditStatus(row)" :icon="Edit">
          </el-button>
        </el-tooltip>
        <el-tooltip content="重置密码" effect="light" placement="top">
          <el-button size="default" plain @click="onResetPw(row)" :icon="Refresh"> </el-button>
        </el-tooltip>
        <el-tooltip content="移除" effect="light" placement="right-start">
          <el-button size="default" type="danger" plain @click="onRemove(row)" :icon="Delete">
          </el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
  <!-- ----分页---- -->
  <el-pagination
    v-if="peopleList[0]"
    v-model:current-page="search.pagenum"
    v-model:page-size="search.pagesize"
    :background="true"
    :page-sizes="[7, 9, 12, 15]"
    layout="total, prev, pager, next, sizes"
    :total="total"
    style="margin-top: 20px; justify-content: flex-end"
    @current-change="pageChange"
    @size-change="handleSizeChange"
  />
  <!-- 弹窗显示录入 -->
  <PersonEnterDialog ref="personEnterRef" @after="afterOnEnter"></PersonEnterDialog>
  <!-- 抽屉显示个人排班表记录 -->
  <PersonRecordDrawer ref="personRecordRef"></PersonRecordDrawer>
  <!--  -->
  <AdminListDialog ref="adminListRef"></AdminListDialog>
</template>

<style lang="css" scoped></style>
